<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}提示词管理系统{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .sidebar {
            min-height: 100vh;
            background-color: #f8f9fa;
        }
        .content {
            min-height: 100vh;
        }
        .prompt-card {
            transition: transform 0.2s;
        }
        .prompt-card:hover {
            transform: translateY(-2px);
        }
        .tag {
            font-size: 0.8em;
        }
        .variable {
            background-color: #e3f2fd;
            color: #1976d2;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 0.9em;
        }
        .category-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .stats-card .card-body {
            padding: 1.5rem;
        }
        .navbar-brand {
            font-weight: bold;
        }
        
        /* 开关样式 */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .toggle-slider {
            background-color: #28a745;
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }
        
        .toggle-slider:after {
            content: 'OFF';
            color: white;
            display: block;
            position: absolute;
            transform: translate(-50%,-50%);
            top: 50%;
            left: 70%;
            font-size: 10px;
            font-family: Verdana, sans-serif;
        }
        
        input:checked + .toggle-slider:after {
            content: 'ON';
            left: 30%;
        }
        .btn-outline-primary:hover {
            transform: translateY(-1px);
        }
        .search-form {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .prompt-content {
            max-height: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .prompt-content.expanded {
            max-height: none;
        }
        .fade-in {
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="bi bi-chat-square-text"></i>
                提示词管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('prompts') }}">提示词</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('categories') }}">分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('stats') }}">统计</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-gear"></i> 管理
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ url_for('import_prompts') }}"><i class="bi bi-upload"></i> 导入数据</a></li>
                            <li><a class="dropdown-item" href="{{ url_for('async_demo') }}"><i class="bi bi-lightning"></i> 异步演示</a></li>
    
                            <li><a class="dropdown-item" href="{{ url_for('backup_data') }}"><i class="bi bi-shield-check"></i> 备份数据</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 sidebar p-3">
                <div class="d-grid gap-2">
                    <a href="{{ url_for('add_prompt') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> 新建提示词
                    </a>
                    <a href="{{ url_for('add_category') }}" class="btn btn-outline-primary">
                        <i class="bi bi-folder-plus"></i> 新建分类
                    </a>
                </div>
                
                <hr>
                
                <!-- 快速搜索 -->
                <div class="mb-3">
                    <label class="form-label">快速搜索</label>
                    <input type="text" class="form-control" id="quickSearch" placeholder="搜索提示词...">
                </div>
                
                <!-- 最近使用 -->
                <div class="mb-3">
                    <h6>最近使用</h6>
                    <div id="recentPrompts">
                        <small class="text-muted">暂无记录</small>
                    </div>
                </div>
            </div>
            
            <!-- 主内容区 -->
            <div class="col-md-10 content p-4">
                <!-- Flash 消息功能已移除 (FastAPI不支持) -->
                
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

    <!-- 脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 快速搜索功能
        document.getElementById('quickSearch').addEventListener('input', function(e) {
            const query = e.target.value;
            if (query.length > 2) {
                // 这里可以实现实时搜索
                console.log('搜索:', query);
            }
        });
        
        // 自动隐藏提示消息
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);
        
        // 添加淡入动画
        document.addEventListener('DOMContentLoaded', function() {
            const elements = document.querySelectorAll('.card, .prompt-card');
            elements.forEach(function(el, index) {
                setTimeout(function() {
                    el.classList.add('fade-in');
                }, index * 100);
            });
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>